<template>
  <div class="search">
      <div class="flex-item-center flex-ju-center">
        <el-input placeholder="请输入名称" clearable v-model="params.name" style="width: 500px; margin: 30px"/>
        <el-select v-model="params.type" clearable style="width: 500px; margin: 30px">
          <el-option v-for="item in types" :label="item.name" :value="item.id">{{item.name}}</el-option>
        </el-select>
        <el-button type="primary" icon="Search" @click="search">搜索</el-button>
      </div>

      <Item v-for="item in list" :data="item" :key="item.id"/>

      <el-empty description="暂无数据!" v-if="list.length === 0"/>
      <div class="flex-ju-center">
        <el-pagination background layout="prev, pager, next, total" :total="total" @current-change="handleCurrentChange"/>
      </div>
  </div>
</template>
<script setup>
import {ref, reactive, onMounted, onBeforeMount} from "vue";
import {useRoute} from 'vue-router'
import {goodsListApi} from '@/api/goods.js'
import {typesApi} from '@/api/type.js'
import Item from './component/Item.vue'
const route = useRoute();

const params = reactive({
  name: '',
  type: '',
  page: 1,
  pageSize: 10,
})
const types = ref([])
const list = ref([])
const total = ref(0)
const search = async ()=> {
  const res = await goodsListApi(params)
  list.value = res.list
  total.value = res.total
}

const getTypes = async ()=> {
  const res = await typesApi()
  types.value = res.data
}

const handleCurrentChange = page => {
  params.page = page
  search()
}


onMounted(()=> {
  getTypes()
  setTimeout(()=> {
    params.name = route.query?.keyword || '';
    params.type = route.query?.categories || '';
    search()
  })
})
</script>
<style scoped>
.search{
  width: 60vw;
  margin-left: auto;
  margin-right: auto;
}
</style>